<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/example001.css">
</head>
<body>
	<div class="left-menu">
		<ul class="menu">
			<li><input id="Demo" class="menu-item" type="radio" name="menu"
				checked hidden><label for="Demo" class="menu-label">Demo</label>
				<ul class="menu-item-list">
					<li><a href="#demo-001">Demo 001</a></li>
					<li><a href="#demo-004">Demo 004</a></li>
					<li><a href="#demo-005">Demo 005</a></li>
					<li><a href="#demo-006">Demo 006</a></li>
					<li><a href="#demo-007">Demo 007</a></li>
					<li><a href="#demo-008">Demo 008</a></li>
					<li><a href="#float-layout">Float Layout</a></li>
					<li><a href="#popup-menu">Popup Menu</a></li>
				</ul></li>
			<li><input id="About" class="menu-item" type="radio" name="menu"
				hidden><label for="About"  class="menu-label">About</label>
				<ul class="menu-item-list">
					<li><a href="#4">Us</a></li>
					<li><a href="#5">App</a></li>
					<li><a href="#6">Web</a></li>
				</ul></li>
		</ul>
	</div>

	<div class="right-content">
		<!-- Demo001 -->
		<div class="floor" id="demo-001">
			<div class="floor-title">居中</div>
			<div class="floor-content">
				<!-- 内容水平居中 -->
				<div class="single-line-center-horizontal">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>

				<!-- 垂直居中 -->
				<div class="single-line-center-vertical">
					<p>BBBBBBBBBBBBBBBBBBBBBBBBB</p>
				</div>

				<div class="multi-line-center">
					<div>
						这里的文字用来做多行文字垂直居中对齐的测试。<br> 是第二行文字，您还可以再添加一行文字做测试！<br>
						是第二行文字，您还可以再添加一行文字做测试！<br> 是第二行文字，您还可以再添加一行文字做测试！<br>
					</div>
				</div>
			</div>
		</div>
		<!-- Demo004 -->
		<div class="floor" id="demo-004">
			<div class="floor-title">Demo004</div>
			<div class="floor-content c004">
				<ul class="c004-01 clearfloat">
					<li>
						<div class="c004-01-01">
							<img src="image/mm1.jpg" />
						</div>
					</li>
					<li>
						<div class="c004-01-01">
							<img src="image/mm2.jpg" />
						</div>
					</li>
					<li>
						<div class="c004-01-01">
							<img src="image/mm3.jpg" />
						</div>
					</li>
					<li>
						<div class="c004-01-01">
							<img src="image/mm4.jpg" />
						</div>
					</li>
					<li>
						<div class="c004-01-01">
							<img src="image/mm1.jpg" />
						</div>
					</li>
					<li>
						<div class="c004-01-01">
							<img src="image/mm2.jpg" />
						</div>
					</li>
					<li>
						<div class="c004-01-01">
							<img src="image/mm3.jpg" />
						</div>
					</li>
					<li>
						<div class="c004-01-01">
							<img src="image/mm4.jpg" />
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- Demo005 -->
		<div class="floor" id="demo-005">
			<div class="floor-title">Demo005</div>
			<div class="c005">
				<img src="image/image001.png" class="c002-01"></img> <img
					src="image/image002.png" class="c002-01"></img> <img
					src="image/image003.png" class="c002-01"></img> <img
					src="image/image001.png" class="c002-01"></img> <img
					src="image/image002.png" class="c002-01"></img> <img
					src="image/image003.png" class="c002-01"></img> <img
					src="image/image001.png" class="c002-01"></img> <img
					src="image/image002.png" class="c002-01"></img> <img
					src="image/image003.png" class="c002-01"></img> <img
					src="image/image001.png" class="c002-01"></img> <img
					src="image/image002.png" class="c002-01"></img> <img
					src="image/image003.png" class="c002-01"></img><img
					src="image/image001.png" class="c002-01"></img> <img
					src="image/image002.png" class="c002-01"></img> <img
					src="image/image003.png" class="c002-01"></img> <img
					src="image/image001.png" class="c002-01"></img> <img
					src="image/image002.png" class="c002-01"></img> <img
					src="image/image003.png" class="c002-01"></img> <img
					src="image/image001.png" class="c002-01"></img> <img
					src="image/image002.png" class="c002-01"></img> <img
					src="image/image003.png" class="c002-01"></img> <img
					src="image/image001.png" class="c002-01"></img> <img
					src="image/image002.png" class="c002-01"></img> <img
					src="image/image003.png" class="c002-01"></img>
			</div>
		</div>
		<!-- Demo006 -->
		<div class="floor c006" id="demo-006">
			<div class="floor-title">Demo006</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
			<div class="c006-01">
				<div class="fixture">.is-4of12</div>
			</div>
		</div>
		<!-- Demo007 -->
		<div class="floor" id="demo-007">
			<div class="floor-title">Demo007</div>
			<div class="c007-01">
				<div class="c007-01-01">1 - J.dkfll.v.vlkd</div>
			</div>
			<div class="c007-01">
				<div class="c007-01-02">2 - J.dkfll.v.vlkd</div>
			</div>
			<div class="c007-01">
				<div class="c007-01-03">3 - J.dkfll.v.vlkd</div>
			</div>
			<div class="c007-01">
				<div class="c007-01-04">4 - J.dkfll.v.vlkd</div>
			</div>
		</div>
		<!-- Demo008 -->
		<div class="floor" id="demo-008">
			<div class="floor-title">Demo008</div>
			<div class="c008-1">
				<div class="c008-1-01">margin: 20px</div>
				<div class="c008-1-02">margin: 20px</div>
				<div class="c008-1-03">margin: 20px</div>
			</div>

			<div class="c008-2">
				<div class="c008-2-01">margin: 20px</div>
				<div class="c008-2-02">margin: 20px</div>
				<div class="c008-2-03">margin: 20px</div>
			</div>

			<div class="c008-3">
				<div class="c008-3-01">margin: 20px</div>
				<div class="c008-3-02">margin: 20px</div>
				<div class="c008-3-03">margin: 20px</div>
			</div>

			<div class="c008-4">
				<div class="c008-4-01">margin: 20px</div>
				<div class="c008-4-02">margin: 20px</div>
				<div class="c008-4-03">margin: 20px</div>
			</div>
		</div>

		<div class="floor" id="float-layout">
			<div class="floor-title">流体布局</div>
			<div class="card clearfloat">
				<img class="hs01" src="image/doge.jpg" />
				<div class="card-body01">
					柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡，拥有灵敏的感官，使得柴犬屡次成为上乘的猎狩犬。
					柴犬性格活泼、好动；对自己喜欢的玩具、会一天到晚的把玩。对外有极强警惕性户主看家护院：特别是对大型同类，并且不服输。
					草丛中的耗子、鸟都会是它的猎物及玩具。柴犬是日本国宝，常见的赤色柴犬价格都在6000日元到15000日元之间。
					另浙江等地，一直以来方言里管土狗叫柴犬，近亲于中华田园犬。柴犬最初是用来狩猎大型猎物，但是现在他们用于狩猎较小的动物。
					在日本的城市、郊区和乡村都可看到柴犬。柴犬的名字发源于日本中央高地，在文献上，为昭和初期的日本狗保存会的会刊「日本狗」所采用。「
					柴」是「打柴人」的时候的「柴」，指小型的杂木。由于柴犬能巧妙地穿过杂木帮助打猎，而且红褐色的毛色与枯萎的柴相似，故名。
					亦有人认为古语的「柴」，是把信州的柴村作为起源的意思。</div>
			</div>

			<div class="card clearfloat">
				<img class="hs02" src="image/doge.jpg" />
				<div class="card-body02">
					柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡，拥有灵敏的感官，使得柴犬屡次成为上乘的猎狩犬。
					柴犬性格活泼、好动；对自己喜欢的玩具、会一天到晚的把玩。对外有极强警惕性户主看家护院：特别是对大型同类，并且不服输。
					草丛中的耗子、鸟都会是它的猎物及玩具。柴犬是日本国宝，常见的赤色柴犬价格都在6000日元到15000日元之间。</div>
			</div>

			<div class="card clearfloat">
				<div class="card-body03">
					柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡，拥有灵敏的感官，使得柴犬屡次成为上乘的猎狩犬。
					柴犬性格活泼、好动；对自己喜欢的玩具、会一天到晚的把玩。对外有极强警惕性户主看家护院：特别是对大型同类，并且不服输。
					草丛中的耗子、鸟都会是它的猎物及玩具。柴犬是日本国宝，常见的赤色柴犬价格都在6000日元到15000日元之间。
					另浙江等地，一直以来方言里管土狗叫柴犬，近亲于中华田园犬。柴犬最初是用来狩猎大型猎物，但是现在他们用于狩猎较小的动物。
					在日本的城市、郊区和乡村都可看到柴犬。柴犬的名字发源于日本中央高地，在文献上，为昭和初期的日本狗保存会的会刊「日本狗」所采用。「
					柴」是「打柴人」的时候的「柴」，指小型的杂木。由于柴犬能巧妙地穿过杂木帮助打猎，而且红褐色的毛色与枯萎的柴相似，故名。
					亦有人认为古语的「柴」，是把信州的柴村作为起源的意思。</div>
				<img class="hs03" src="image/doge.jpg" />
			</div>

			<div class="card clearfloat">
				<img class="hs04" src="image/doge.jpg" />
				<div class="card-body04">
					柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡，拥有灵敏的感官，使得柴犬屡次成为上乘的猎狩犬。
					柴犬性格活泼、好动；对自己喜欢的玩具、会一天到晚的把玩。对外有极强警惕性户主看家护院：特别是对大型同类，并且不服输。
					草丛中的耗子、鸟都会是它的猎物及玩具。柴犬是日本国宝，常见的赤色柴犬价格都在6000日元到15000日元之间。</div>
			</div>
		</div>

		<div class="floor" id="popup-menu">
			<div class="floor-title">下拉菜单</div>
			<div class="window">
				<div class="title">
					<span>Window</span> <input type="button" value="X"> <input
						type="button" value="口"> <input type="button" value="_">
				</div>
				<ul class="menu">
					<li class="top-item"><a href="javascript:0">Menu
							AAAAAAAAAAAAAAAAAAAAAAA</a>
						<ul class="list-item">
							<li><a href="javascript:0">New</a></li>
							<li><a href="javascript:0">Open</a></li>
						</ul></li>
					<li class="top-item"><a href="javascript:0">Menu B</a>
						<ul class="list-item">
							<li><a href="javascript:0">Redo</a></li>
							<li><a href="javascript:0">Undo</a></li>
						</ul></li>
					<li class="top-item"><a href="javascript:0">Menu CD</a>
						<ul class="list-item">
							<li><a href="javascript:0">Redo</a></li>
							<li><a href="javascript:0">Undo</a></li>
						</ul></li>
				</ul>
				<div>柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡，拥有灵敏的感官，使得柴犬屡次成为上乘的猎狩犬。
					柴犬性格活泼、好动；对自己喜欢的玩具、会一天到晚的把玩。对外有极强警惕性户主看家护院：特别是对大型同类，并且不服输。
					草丛中的耗子、鸟都会是它的猎物及玩具。柴犬是日本国宝，常见的赤色柴犬价格都在6000日元到15000日元之间。
					另浙江等地，一直以来方言里管土狗叫柴犬，近亲于中华田园犬。柴犬最初是用来狩猎大型猎物，但是现在他们用于狩猎较小的动物。
					在日本的城市、郊区和乡村都可看到柴犬。柴犬的名字发源于日本中央高地，在文献上，为昭和初期的日本狗保存会的会刊「日本狗」所采用。「
					柴」是「打柴人」的时候的「柴」，指小型的杂木。由于柴犬能巧妙地穿过杂木帮助打猎，而且红褐色的毛色与枯萎的柴相似，故名。
					亦有人认为古语的「柴」，是把信州的柴村作为起源的意思。</div>
			</div>
		</div>

		<div class="floor bottom"></div>
	</div>
</body>
</html>